<template>
  <div class="recomm">
    <Card
      v-for="item in list"
      :key="item.productId"
      :price="item.currentPrice"
      :title="item.productName"
      :thumb="item.imgUrl"
      :origin-price="item.originalPrice"
      @click="gotoDetail(item.productId)"
    />
  </div>
</template>

<script>
import { Card } from "vant";
import { recommendApi } from "../../utils/api";
export default {
  props: ["num"],
  data() {
    return {
      list: null,
      // 每次上拉需要几条
      count: 2,
      page: 1,
      done: false,
    };
  },
  components: {
    Card,
  },
  watch: {
    async num() {
      this.page++;
      const res = await recommendApi({ count: this.count, page: this.page });
      console.log(res.result.list);
      if (res.status == 0) {
        this.list = this.list.concat(res.result.list);
        this.startId = this.startId + res.result.length;
        //   // 数据改变之后不要立刻请求,因为此时只是在数据模型中改变了数据，视图层并没有改变，而计算高度是要计算视图层的
        //   // 此时重新计算高度 还是之前的高度
        //   // 要添加一下 next
        await this.$nextTick();
        this.$emit("refresh", this.page >= 4);
        if (this.page >= 4) {
          this.done = true;
        }
      }
    },
  },
  mounted() {
    this.GetListData();
  },
  methods: {
    async GetListData() {
      const res = await recommendApi({ count: this.count, page: this.page });
      console.log(res.result.list);
      if (res.status == 0) {
        this.list = res.result.list;
        this.startId = this.list.length;
        await this.$nextTick();
        this.$emit("get-data-end");
      }
    },
    gotoDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style scoped>
.recomm /deep/ .van-card {
  background-color: #fff !important;
  border-bottom: 1px solid rgb(231, 230, 230);
}
.recomm /deep/ .van-card__thumb {
  margin-right: 30px;
  margin-left: 10px;
}
.recomm /deep/ .van-card__title {
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}
.recomm /deep/ .van-card__bottom {
  text-align: left;
}
.recomm /deep/ .van-card__price {
  color: #df3a01;
  font-size: 18px;
  font-weight: 700;
}
.recomm /deep/ .van-card__price-integer {
  color: #df3a01;
  font-size: 18px;
  font-weight: 700;
}
</style>
